<template>
  <div class="project">
    <!-- 计划年度投资 -->
    <div class="project-part">
      <div class="project-part-title">计划年度投资</div>

      <el-button
        icon="el-icon-plus"
        class="add-button"
        @click="addYearPlan"
        v-if="yearList.length < yearOptions.length"
        >新增</el-button
      >
    </div>

    <el-table
      :data="yearList"
      class="year-table"
      :header-cell-style="{
        background: '#F2F6FB',
        color: ' #6B767D'
      }"
    >
      <el-table-column label="年度" prop="year">
        <template slot-scope="scope">
          <el-select
            placeholder="年度"
            v-model="scope.row.year"
          >
            <el-option
              v-for="item in yearOptions"
              :key="item"
              :label="item"
              :value="item"
              :disabled="
                isOptionDisabledYear(item, scope.row)
              "
            >
            </el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column
        label="本年度计划投资(万元)"
        prop="planTotal"
        width="180"
      >
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.planTotal"
            type="number"
          />
        </template>
      </el-table-column>
      <el-table-column
        v-for="month in 12"
        :key="month"
        :label="month + '月'"
        :prop="'month' + month"
        align="center"
      >
        <template slot-scope="scope">
          <div class="month-input-wrapper">
            <el-input
              v-model="scope.row['month' + month]"
              type="number"
            />
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            @click="deleteYearPlan(scope.$index)"
            type="text"
            style="color: #ff5b5b; font-weight: 400"
            >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 计划固定投资 -->
    <div class="project-part">
      <div class="project-part-title">计划固定投资</div>

      <el-button
        icon="el-icon-plus"
        class="add-button"
        @click="addFixedPlan"
        v-if="seasonList.length < yearOptions.length"
        >新增</el-button
      >
    </div>

    <el-table
      :data="seasonList"
      :header-cell-style="{
        background: '#F2F6FB',
        color: ' #6B767D'
      }"
    >
      <el-table-column label="年度" prop="year">
        <template slot-scope="scope">
          <el-select
            placeholder="年度"
            v-model="scope.row.year"
          >
            <el-option
              v-for="item in yearOptions"
              :key="item"
              :label="item"
              :value="item"
              :disabled="
                isOptionDisabledSeason(item, scope.row)
              "
            >
            </el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column
        label="本年度计划完成固投(万元)"
        prop="fixedTotal"
        width="220"
      >
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.fixedTotal"
            type="number"
          />
        </template>
      </el-table-column>
      <el-table-column label="1月" prop="fixedOneFirst">
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.fixedOneFirst"
            type="number"
          />
        </template>
      </el-table-column>
      <el-table-column label="2月" prop="fixedOneSecond">
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.fixedOneSecond"
            type="number"
          />
        </template>
      </el-table-column>
      <el-table-column label="3月" prop="season1">
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.season1"
            type="number"
          />
        </template>
      </el-table-column>
      <el-table-column label="4月" prop="fixedTwoFirst">
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.fixedTwoFirst"
            type="number"
          />
        </template>
      </el-table-column>
      <el-table-column label="5月" prop="fixedTwoSecond">
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.fixedTwoSecond"
            type="number"
          />
        </template>
      </el-table-column>
      <el-table-column label="6月" prop="season2">
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.season2"
            type="number"
          />
        </template>
      </el-table-column>
      <el-table-column label="7月" prop="fixedThreeFirst">
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.fixedThreeFirst"
            type="number"
          />
        </template>
      </el-table-column>
      <el-table-column label="8月" prop="fixedThreeSecond">
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.fixedThreeSecond"
            type="number"
          />
        </template>
      </el-table-column>
      <el-table-column label="9月" prop="season3">
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.season3"
            type="number"
          />
        </template>
      </el-table-column>
      <el-table-column label="10月" prop="fixed_four_first">
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.fixedFourFirst"
            type="number"
          />
        </template>
      </el-table-column>
      <el-table-column
        label="11月"
        prop="fixed_four_second"
      >
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.fixedFourSecond"
            type="number"
          />
        </template>
      </el-table-column>
      <el-table-column label="12月" prop="season4">
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.season4"
            type="number"
          />
        </template>
      </el-table-column>
      <!-- <el-table-column
        label="10月"
        v-for="season in 4"
        :key="season"
        :label="season + '季度'"
        :prop="'season' + season"
        align="center"
      >
        <template slot-scope="scope">
          <div class="season-input-wrapper">
            <el-input
              v-model="scope.row['season' + season]"
              type="number"
            />
          </div>
        </template>
      </el-table-column> -->
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            @click="deleteFixedPlan(scope.$index)"
            type="text"
            style="color: #ff5b5b; font-weight: 400"
            >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  props: {
    detailInfo: Array
  },
  data() {
    return {
      yearList: [],
      seasonList: [],
      yearOptions: [],
      isPlanInfoReady: false,
      isPlanInfoChanged: false
    }
  },
  watch: {
    detailInfo(val) {
      this.yearList = []
      this.seasonList = []
      if (val.length) {
        val.forEach((item) => {
          // 检查年度投资数据是否除了年份外还有其他非空数据
          const yearData = {
            pkid: item.pkid,
            year: item.year,
            planTotal: item.planTotal,
            month1: item.planOne,
            month2: item.planTwo,
            month3: item.planThree,
            month4: item.planFour,
            month5: item.planFive,
            month6: item.planSix,
            month7: item.planSeven,
            month8: item.planEight,
            month9: item.planNine,
            month10: item.planTen,
            month11: item.planEleven,
            month12: item.planTwelve
          }

          // 检查除年份外的数据是否有非空值（包括0）
          const hasYearData = [
            item.planTotal,
            item.planOne,
            item.planTwo,
            item.planThree,
            item.planFour,
            item.planFive,
            item.planSix,
            item.planSeven,
            item.planEight,
            item.planNine,
            item.planTen,
            item.planEleven,
            item.planTwelve
          ].some(
            (value) =>
              value !== null &&
              value !== undefined &&
              value !== ''
          )

          if (hasYearData) {
            this.yearList.push(yearData)
          }

          // 检查固定投资数据是否除了年份外还有其他非空数据
          const seasonData = {
            year: item.year,
            fixedTotal: item.fixedTotal,
            season1: item.fixedOne,
            season2: item.fixedTwo,
            season3: item.fixedThree,
            season4: item.fixedFour,
            fixedOneFirst: item.fixedOneFirst,
            fixedOneSecond: item.fixedOneSecond,
            fixedTwoFirst: item.fixedTwoFirst,
            fixedTwoSecond: item.fixedTwoSecond,
            fixedThreeFirst: item.fixedThreeFirst,
            fixedThreeSecond: item.fixedThreeSecond,
            fixedFourFirst: item.fixedFourFirst,
            fixedFourSecond: item.fixedFourSecond
          }

          // 检查除年份外的数据是否有非空值（包括0）
          const hasSeasonData = [
            item.fixedTotal,
            item.fixedOne,
            item.fixedTwo,
            item.fixedThree,
            item.fixedFour,
            item.fixedOneFirst,
            item.fixedOneSecond,
            item.fixedTwoFirst,
            item.fixedTwoSecond,
            item.fixedThreeFirst,
            item.fixedThreeSecond,
            item.fixedFourFirst,
            item.fixedFourSecond
          ].some(
            (value) =>
              value !== null &&
              value !== undefined &&
              value !== ''
          )

          if (hasSeasonData) {
            this.seasonList.push(seasonData)
          }
        })
      }
    },
    yearList: {
      handler(val) {
        if (this.isPlanInfoReady === true) {
          this.isPlanInfoChanged = true
        }
      },
      deep: true
    },
    seasonList: {
      handler(val) {
        if (this.isPlanInfoReady === true) {
          this.isPlanInfoChanged = true
        }
      },
      deep: true
    }
  },
  created() {
    const currentYear = new Date().getFullYear()
    this.yearOptions = Array.from(
      { length: 5 },
      (_, i) => currentYear - 4 + i
    ).sort((a, b) => b - a)
  },
  methods: {
    setInfoReady() {
      setTimeout(() => {
        this.isPlanInfoReady = true
        this.isPlanInfoChanged = false
      }, 300)
    },

    isOptionDisabledYear(optionValue, currentRow) {
      const selectedYears = this.yearList
        .filter((row) => row !== currentRow)
        .map((row) => row.year)
        .filter(Boolean)

      return selectedYears.includes(optionValue)
    },
    isOptionDisabledSeason(optionValue, currentRow) {
      const selectedYears = this.seasonList
        .filter((row) => row !== currentRow)
        .map((row) => row.year)
        .filter(Boolean)

      return selectedYears.includes(optionValue)
    },
    addYearPlan() {
      this.yearList.push({
        year: '',
        planTotal: '',
        month1: '',
        month2: '',
        month3: '',
        month4: '',
        month5: '',
        month6: '',
        month7: '',
        month8: '',
        month9: '',
        month10: '',
        month11: '',
        month12: ''
      })
    },
    deleteYearPlan(index) {
      this.yearList.splice(index, 1)
    },
    addFixedPlan() {
      this.seasonList.push({
        year: '',
        fixedTotal: '',
        season1: '',
        season2: '',
        season3: '',
        season4: '',
        fixedOneFirst: '',
        fixedOneSecond: '',
        fixedTwoFirst: '',
        fixedTwoSecond: '',
        fixedThreeFirst: '',
        fixedThreeSecond: '',
        fixedFourFirst: '',
        fixedFourSecond: ''
      })
    },
    deleteFixedPlan(index) {
      this.seasonList.splice(index, 1)
    },
    getYearList() {
      console.log('get year list ', this.yearList)
      return [...this.yearList]
    },
    getSeasonList() {
      return [...this.seasonList]
    }
  }
}
</script>

<style lang="scss" scoped>
@import '~@/assets/css/form.scss';
.project {
  padding: 0 10px;

  &-part {
    position: relative;
    display: flex;
    align-items: center;
    margin-top: 20px !important;
  }

  .el-table {
    margin: 20px 0;
  }

  .add-button {
    position: absolute;
    left: 0;
    top: 0;
    width: 100px;
    height: 32px;
    background: #497fa3;
    border-radius: 4px;
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    margin-left: 150px;
    margin-top: -5px;
  }
}
</style>
